<template>
	<view class="wrap">
		<view class="top"></view>
		<view class="content">
			<view class="title">欢迎使用</view>
			<view class="disc">wandroid</view>

			<input class="u-border-bottom tel" type="text" v-model="username" placeholder="请输入用户名" />
			<input class="u-border-bottom pass" type="password" v-model="password" placeholder="请输入密码" />

			<u-button :custom-style="customStyle" @click="onLogin">登录</u-button>

			<view class="regist" @click="regist">注册账号</view>
		</view>
		<view class="bottom">本程序使用uniapp开发</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {mapState,mapMutations} from 'vuex'  //1、引入vuex中mapState  mapMutations 参数和方法
	
	export default {
		computed:mapState(['hasLogin','forceLogin','userId','token','userInfo']),//2、需要使用的参数值
		data() {
			return {
				username: '',
				password: '',
				customStyle: {
					margin: '30px', // 注意驼峰命名，并且值必须用引号包括，因为这是对象
					backgroundColor: "blue",
					color: "white"
				}
			}
		},
		methods: {
			...mapMutations(['login']),//3、vuex中定义的方法
			
			onLogin() {
				// console.log("登录");
				if (Object.keys(this.username).length === 0) {
					this.$refs.uToast.show({
						title: '用户名不能为空',
						type: 'error'
					})
					return;
				} else if (Object.keys(this.password).length === 0) {
					this.$refs.uToast.show({
						title: '密码不能为空',
						type: 'error'
					})
					return;
				}

				this.$u.post('/user/login', {
					username: this.username,
					password: this.password
				}, {
					"Content-Type": "application/x-www-form-urlencoded",
					dataType: 'json',
				}).then((res) => {
					this.$refs.uToast.show({
						title: '登录成功',
						type: 'success',
						duration: 1000,
					});
					res.data.password = this.password;
					this.login(res.data)//4、登录后数据 加到vuex中
					
				
					uni.switchTab({
						url: '/pages/mypage/mypage'
					});
					// console.log('pageIndex:'+this.pageIndex);
				}).catch((res) => {
					this.$refs.uToast.show({
						title: res.errorMsg,
						type: 'error',
					})
				})


			},
			regist() {
				uni.navigateTo({
					url: '../regist/regist'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wrap {
		font-size: 28rpx;

		.content {
			margin-top: 20%;
			font-size: 60rpx;
			font-weight: 500;
			margin: 80rpx auto 0;

			.title {
				text-align: center;
			}

			.disc {
				text-align: center;
				font-weight: 200;
				font-size: 20rpx;
			}

			.tel {
				margin: 300rpx 80rpx 60rpx 80rpx;
				font-size: 28rpx;
			}

			.pass {
				margin: 60rpx 80rpx 60rpx 80rpx;
				font-size: 28rpx;
			}

			.regist {
				font-size: 28rpx;
				text-align: right;
				margin-right: 60rpx;
			}

		}

		.bottom {
			text-align: center;
			position: absolute;
			bottom: 20rpx;
			width: 100%;
		}
	}
</style>
